<template>
  <div>
    <!-- // 课程弹框 -->
    <a-modal
      title="选择课程"
      :visible="visible"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      style="top: 150px;"
      width="580px"
      :bodyStyle="{padding:'16px'}"
    >
      <a-spin :spinning="confirmLoading">
        <!-- <a-select style="width: 200px" v-model="queryParam.structures_id" @change="change">
        <a-select-option
          v-for="(item,index) in schoolSelect"
          :key="index"
          :value="item.id"
        >{{item.name}}</a-select-option>
        </a-select>-->
        <div v-for="(item,index) in schoolSelect" :key="index">
          <div
            v-if="id==item.id"
            style="margin-bottom:10px;width:500px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
          >
            当前选择校区：
            <b style="font-size:16px;">{{item.name}}</b>
          </div>
        </div>
        <div v-if="id">
          <a-form-model :labelCol="{span:5}" :wrapperCol="{span:15}">
            <a-row>
              <a-col :span="18">
                <a-form-model-item style="margin-bottom:10px">
                  <a-input
                    placeholder="请选择搜索课程(回车搜索)"
                    style="width:90%"
                    v-model="keywords"
                    @pressEnter="getData()"
                  >
                    <a-tooltip slot="suffix" title="请输入搜索课程">
                      <a-icon type="search" style="color: rgba(0,0,0,.45)" @click="searchcurse" />
                    </a-tooltip>
                  </a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </div>

        <a-table
          :columns="columns"
          :dataSource="loadData"
          class="user_management_table"
          style="max-height:400px;overflow-y:auto;border:1px solid #e8e8e8;"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :rowKey="(record) => record.id"
          :pagination="false"
        ></a-table>
      </a-spin>
    </a-modal>
  </div>
</template>
<script>
import { STable } from '@/components'
import { newCoursesList } from '@/api/courseCharge'
import { campusList } from '@/api/structure'
export default {
  name: 'courseModel',
  components: {
    STable,
  },
  props: ['able'],
  inject: ['reload'],
  data() {
    return {
      visible: false,
      confirmLoading: false,
      selectedRowKeys: [],
      tableData: [],
      id: null,
      schoolSelect: [], //校区
      keywords: '',
      queryParam: {
        school_id: this.$store.state.user.school,
        pageSize: 9999999999,
      },
      columns: [
        {
          title: '课程名称',
          dataIndex: 'name',
          fixed: 'left',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '类型',
          dataIndex: 'type',
          align: 'center',
          customRender(type) {
            return type == 1 ? '一对一' : '一对多' //1是男，2是女
          },
        },
        // {
        //   title: '单价',
        //   dataIndex: 'price_arr',
        //   align: 'center', //,
        //   scopedSlots: { customRender: 'price_arr' }
        // }
      ],
      loadData: [],
    }
  },
  watch: {
    visible(val) {
      if (val == false) {
        this.selectedRowKeys = []
      }
    },
    id(val) {
      this.getData()
    },
  },
  methods: {
    //搜索
    searchcurse() {
      this.getData()
    },
    name() {},
    showModal(val, id) {
      //
      this.selectedRowKeys = val
      this.id = id
      this.visible = true
      this.getData()
    },
    getData() {
      this.confirmLoading = true
      campusList({
        school_id: this.$store.state.user.school,
        pageSize: 99999999999999,
        is_enable: this.able ? 1 : undefined,
      })
        .then((res) => {
          this.schoolSelect = res
        })
        .finally(() => {
          newCoursesList(
            Object.assign(this.queryParam, {
              structures_id: this.id,
              is_enable: this.able ? 1 : undefined,
              keywords: this.keywords,
            })
          )
            .then((res) => {
              this.loadData = JSON.parse(JSON.stringify(res.data))
            })
            .finally(() => {
              this.confirmLoading = false
            })
        })
    },
    handleCancel(e) {
      this.visible = false
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    handleOk() {
      if (this.selectedRowKeys.length > 0) {
        let data = []
        this.selectedRowKeys.forEach((val) => {
          this.loadData.forEach((item) => {
            if (val == item.id) {
              data.push(item)
            }
          })
        })
        this.visible = false
        this.$emit('receive', data)
      }
    },
  },
}
</script>